//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('./me_sports_data.less')
import * as echarts from 'echarts';

//引入模块
const dom = require('../../utils/dom.js')
const axios = require('../../utils/axios.js')

document.addEventListener('DOMContentLoaded', async function () {
    //获取头像信息
    axios.get('/api/user/info').then(res => {
        dom.get('#img').src = axios.defaults.baseURL + res.data.data.imgUrl
    })
    //获取运动数据信息病别渲染到前端
    let res = await axios.get('/api/exercise')
    let days = res.data.data.days
    dom.get('#sum7Duration').textContent = (res.data.data.sum7Duration / 60).toFixed(2)
    dom.get('#sum7Calorie').textContent = (res.data.data.sum7Calorie / 1000).toFixed(2)
    dom.get('#sum7Meter').textContent = (res.data.data.sum7Meter / 1000).toFixed(2)
    dom.get('#accumulate').textContent = days.length
    dom.get('#continuous').textContent = days.length
    console.log(days);

    let x1 = days.map(v => v.date.slice(5))
    let y1 = days.map(v => v.sumDuration)
    // 初始化echarts1实例
    let myChart1 = echarts.init(dom.get('#myChart1'));
    myChart1.setOption({
        title: {
            text: '近7天运动时长'
        },
        grid: {
            width: '80%',
            height: 100,
            left: 40
        },
        xAxis: {
            type: 'category',
            data: x1,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: y1,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    })

    let data1 = 0; //跑步数据
    days.forEach(v => {
        data1 += v.exerciseData[0].duration;
    });

    let data2 = 0; //骑行数据
    days.forEach(v => {
        data2 += v.exerciseData[1].duration;
    });

    let data3 = 0; //训练数据
    days.forEach(v => {
        data3 += v.exerciseData[2].duration;
    });
    // 初始化echarts2实例
    let myChart2 = echarts.init(dom.get('#myChart2'));
    myChart2.setOption({
        title: {
            text: '运动分类',
            left: 'left'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'

        },
        series: [
            {
                name: '运动分类',
                type: 'pie',
                radius: '80%', //调整大小
                left: 0, //调整饼图的位置
                label: { //显示在饼图中的文字标签
                    position: 'inside',
                    formatter: '{d}%',
                    color: '#fff',
                    fontSize: 16,
                },
                type: 'pie',
                data: [
                    { value: data1, name: '跑步' },
                    { value: data2, name: '骑行' },
                    { value: data3, name: '训练' },
                ],
            }
        ]
    })

    //图表3：堆叠条形图
    //跑步消耗卡路里
    let data1Arr = days.map(v => v.exerciseData[0].calorie);
    //骑行消耗卡路里
    let data2Arr = days.map(v => v.exerciseData[1].calorie);
    //训练消耗卡路里
    let data3Arr = days.map(v => v.exerciseData[2].calorie);
    console.log(data1Arr, data2Arr, data3Arr);
    // 初始化echarts2实例
    const myChart3 = echarts.init(dom.get('#myChart3'));
    myChart3.setOption({
        title: {
            text: '七日运动消耗',
        },
        legend: { //图例
            left: 'right',
            top: 10,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: x1, //y轴类目
        },
        series: [
            {
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data1Arr,
            },
            {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data2Arr
            },
            {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data3Arr
            },
        ]
    });
})